<template>
  <div class="coupon">

    <!-- <div class="title">
      <img src="../../assets/img/home/couponTitle.png" alt="" fit="cover">
    </div> -->
    <div class="back" @click="$router.back()">返回</div>
    <van-list v-model="loading" :finished="finished" @load="onLoad" :error.sync="err" error-text="加载失败，点击这里重试">
      <div class="couponList">
        <div class="couponBox" v-for="(item,index) in couponList" :key="index">
          <div class="Box">
            <div class="title">商品消费券</div>
            <div class="top">
              <div class="price">
                <span class="icon">￥</span>
                <span>{{parseInt(item.discount)}}</span>
              </div>
              <div class="condition">满{{parseInt(item.fullmoney)}}元可用</div>
            </div>
            <div class="bottom">
              <!-- <div class="name">商品消费券</div> -->
              <div :class="['button',item.is_get==1?'used':'']" @click="getcoupon(item)">{{item.is_get==1?'已领取':'立即领取'}}</div>
              <div class="num">剩余数量：{{item.coupon_number}}</div>
              <div class="time">使用时间</div>
              <div class="timeDeatil">{{getTime(item.use_stime*1000)}}至{{getTime1(item.use_etime*1000)}}</div>

            </div>
          </div>
        </div>
      </div>
    </van-list>
    <themeDialog :visible="visible" :title="title">
      <div>{{content}}</div>
      <div class="Tips" v-if="type">
        <van-button type="primary" size="small" round @click="usergetcoupon">确定</van-button>
        <van-button type="primary" size="small" round @click="visible=false" style="color:white">取消</van-button>
      </div>
      <div class="confirm" v-if="!type">
        <van-button type="primary" size="small" round @click="closeDialog">确定</van-button>
      </div>
    </themeDialog>
  </div>
</template>
<script>
import themeDialog from "../../components/themeDialog.vue";
export default {
  name: '',
  components: {
    themeDialog
  },
  mixins: [],
  props: {

  },
  data () {
    return {
      page: 1,
      loading: false,
      finished: true,
      visible: false,
      err: false,
      couponList: [],
      type: true,
      title: '提示',
      item: {},
      content: '是否确认要领券？'
      // bottom: '<van-button plain type="primary">朴素按钮</van-button><van-button plain type="info">朴素按钮</van-button>'
    }
  },
  computed: {

  },
  watch: {

  },
  mounted () {

  },
  created () {
    this.getcouponlist()

  },
  methods: {
    onLoad () {
      this.page++
      this.getcouponlist()
    },
    getcouponlist () {
      this.loading = true
      this.$axios
        .get(this.$api.getcouponlist, {
          params: { page: this.page },
        })
        .then((res) => {
          this.loading = false

          if (res.data.code == 1) {
            if (res.data.last_page == res.data.current_page) {
              this.finished = true
            } else {
              this.finished = false
            }
            this.page = Number(res.data.data.current_page)
            this.couponList = this.couponList.concat(res.data.data.data);

          } else {
            this.err = true;
            this.loading = false;
          }
        });
    },
    //转化时间戳
    getTime (time) {

      var now = new Date(parseInt(time)),
        y = now.getFullYear(),
        m = now.getMonth() + 1,
        d = now.getDate();
      return y + '年' + (m < 10 ? '0' + m : m) + '月' + (d < 10 ? '0' + d : d) + '日'

    },
    getTime1 (time) {

      var now = new Date(parseInt(time)),

        m = now.getMonth() + 1,
        d = now.getDate();
      return (m < 10 ? '0' + m : m) + '月' + (d < 10 ? '0' + d : d) + '日'

    },
    //领取消费券
    getcoupon (item) {
      if (item.is_get != 1) {
        this.visible = true
        this.item = item
      }

    },
    usergetcoupon () {
      this.$axios.post(this.$api.usergetcoupon, {
        coupon_id: this.item.coupon_id
      }).then((res) => {
        this.content = res.data.msg
        this.visible = true
        this.type = false
        if (res.data.code == 1) {
          this.title = '领取成功'
        } else {
          this.title = '领取失败'

        }
      })
    },
    //关闭提示
    closeDialog () {
      this.visible = false
      this.title = '提示',
        this.content = '是否确认要领券？'
      this.item = {},
        this.type = true
    },


  }
};
</script>
<style lang='less' scoped>
.back {
  width: 60px;
  height: 25px;
  background: rgba(32, 35, 39, 0.3);
  border-radius: 16px 16px 16px 16px;
  opacity: 1;
  text-align: center;
  line-height: 25px;
  font-size: 16px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  margin: 14px 0 0 16px;
}
.coupon {
  background: url('../../assets/img/home/coupon.png') no-repeat;
  overflow: auto;
  background-size: cover;
  min-height: 100vh;
}
/deep/ .van-toast {
  opacity: 0;
}
.title {
  width: 100%;
  height: 225px;
  img {
    width: 100%;
    height: 100%;
  }
}
.couponList {
  margin: 0 16px;
  margin-top: 220px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .couponBox {
    width: 164px;
    height: 215px;
    background: url(../../assets/img/home/redBox.png) no-repeat;
    background-size: cover;
    padding: 2px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    .Box {
      box-sizing: border-box;
      width: 160px;
      height: 100%;

      opacity: 1;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .title {
        width: 69px;
        height: 20px;
        line-height: 20px;
        background: #ffc66b;
        border-radius: 0px 0px 9px 9px;
        font-size: 10px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #b5623b;
        text-align: center;
        margin: -2px;
      }
      .top {
        width: 100%;
        height: 49%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .price {
          margin-top: 12px;
          font-size: 46px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: bold;
          color: #ff4133;
          .icon {
            font-size: 20px;
          }
        }
        .condition {
          font-size: 12px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #d7865f;
        }
      }
      .bottom {
        width: 100%;
        //height: 50%;
        // background: url(../../assets/img/home/Redenvelopes.png) no-repeat;
        background-size: cover;
        font-size: 10px;
        font-family: Source Han Sans CN;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #f9c254;
        margin-top: 12px;
        .num {
          margin-top: 6px;
        }
        .num,
        .time,
        .timeDeatil {
          font-size: 10px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #d7865f;
          margin-bottom: 3px;
        }
        .timeDeatil {
          text-align: center;
          width: 210px;
        }
        .button {
          width: 90px;
          height: 28px;
          background: #ff4133;
          border-radius: 15px 15px 15px 15px;
          //background: url(../../assets/img/home/receive.png) no-repeat;
          text-align: center;
          background-size: cover;
          font-size: 12px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          line-height: 28px;
        }
        .used {
          opacity: 0.5;
        }
      }
    }
  }
}
.theme-dialog_title {
  font-size: 20px;
  color: #f9a254;
  line-height: 48px;
  font-weight: bold;
}
.content {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  text-align: center;
  color: #312e2b;
}
.Tips,
.confirm {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 30px;
  button {
    width: 90px;
    height: 30px;
    background: #f9c254;
    font-size: 12px;
    font-family: Microsoft YaHei;
    border: 1px solid #f9c254;
    color: #b60102;
  }
}
.confirm {
  justify-content: center;
}
</style>